<template>
  <div style="padding: 16px">
    <Card title="项目详情" :bordered="false" style="">
      <BasicForm @register="registerForm" :actionColOptions="{ span: 24 }">
        <template #addressShow="{ model, field }">
          <a-input v-model:value="model[field]" disabled />
        </template>
      </BasicForm>
    </Card>
    <Card title="项目人员" :bordered="false" style="margin-top: 12px">
      <BasicTable @register="registerTable" ref="tableRef">
        <template #toolbar>
          <a-button
            type="primary"
            @click="handleCreate"
            v-if="hasPermission(['system:distinct:query'])"
          >
            关联人员
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '员工离职',
                onClick: handleDepart.bind(null, record),
                ifShow: record.status === 1,
                ifShow: hasPermission(['system:project:update']),
              },
              {
                label: '删除',
                icon: 'ant-design:delete-outlined',
                color: 'error',
                ifShow: hasPermission(['system:project:delete']),
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: '详情',
                icon: 'ph:eye',
                onClick: handleDetail.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </Card>
    <Drawer @register="registerDrawer" @success="handleSuccess" :type="data.type" />
    <BasicModal v-bind="$attrs" @register="register" title="员工离职" @ok="editUser" :centered='true'>
      <DatePicker v-model:value="data.tableItem.leaveTime" />
    </BasicModal>
    <BasicModal v-bind="$attrs" @register="registerInfo" title="详情" @ok="userInfo" :centered='true'>
      <Descriptions title=""  bordered :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }">
        <DescriptionsItem label="姓名">{{ data.userInfoList.userName || '--' }}</DescriptionsItem>
        <DescriptionsItem label="项目职责">{{ data.userInfoList.type==0 ?'管理员' : '施工员' }}</DescriptionsItem>
        <DescriptionsItem label="所属项目">{{
          data.userInfoList.projectName || '--'
        }}</DescriptionsItem>
        <template v-if="data.userInfoList.adminUserDO">
          <DescriptionsItem label="电话">{{
            data.userInfoList.adminUserDO.mobile || '--'
          }}</DescriptionsItem>
           <DescriptionsItem label="邮箱">{{
            data.userInfoList.adminUserDO.email || '--'
          }}</DescriptionsItem>
        </template>
        <template v-if="data.userInfoList.informationDO">
          <DescriptionsItem label="入职时间">{{ data.userInfoList.informationDO.hireDate ? moment(data.userInfoList.informationDO.hireDate).format('YYYY-MM-DD') : '--' }}</DescriptionsItem>
          <DescriptionsItem label="人员类型">{{ data.userInfoList.informationDO.infoType ? data.userInfoList.informationDO.infoType ==2 ? '外聘' : '内聘' : '--' }}</DescriptionsItem>
          <DescriptionsItem label="所在部门">{{ data.userInfoList.informationDO.deptName || '--' }}</DescriptionsItem>
          <DescriptionsItem label="是否离职">{{ data.userInfoList.informationDO.isResigned ? '是' : '否' }}</DescriptionsItem>
          <DescriptionsItem label="离职时间">{{ data.userInfoList.informationDO.resignTime ? moment(data.userInfoList.informationDO.resignTime).format('YYYY-MM-DD') : '--'}}</DescriptionsItem>
        </template>
      </Descriptions>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, unref } from 'vue';
import { Card } from 'ant-design-vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicModal, useModal } from '/@/components/Modal';
import { formSchema } from './components/tableData';
import { useDrawer } from '/@/components/Drawer';
import Drawer from './components/Drawer.vue';
import { BasicTable, useTable, TableAction, TableActionType } from '/@/components/Table';
import { projectGet } from '/@/api/backs/projectsManagement/projectsManagement';
import { usePermission } from '/@/hooks/web/usePermission';
import { ref } from 'vue';
import {
  userProjectList,
  userProjectDelete,
  userProjectAdd,
  userProjectEdit,
  userProjectInfo,
} from '/@/api/backs/projectsManagement/userProject';
import { userSimple } from '/@/api/backs/foundation/foundation';
import { columns, searchFormSchema } from './components/tableData';
import { useRoute } from 'vue-router';
import { message, DatePicker, Modal, Descriptions, DescriptionsItem } from 'ant-design-vue';
import moment from 'moment';
const route = useRoute();

const data: any = reactive({
  type: 'add',
  tableItem: {},
  userInfoList: {},
  projectId: route.params.id,
});

const { hasPermission } = usePermission();
const [registerTable, { reload, setSelectedRowKeys, getForm }] = useTable({
  api: userProjectList,
  columns,
  formConfig: {
    labelWidth: 100,
    schemas: searchFormSchema,
  },
  useSearchForm: true,
  canResize: false,
  showTableSetting: true,
  showIndexColumn: false,
  beforeFetch: (params) => {
    params.projectId = route.params.id;
  },
  actionColumn: {
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
    width: 220,
  },
});
onMounted(async () => {
  const { updateSchema } = getForm();
  const v = await userSimple({ projectId: data.projectId });
  const optionCustomer = v.map((i) => {
    return {
      label: i.userName,
      value: i.userId,
    };
  });
  updateSchema({
    field: 'userId',
    componentProps: () => {
      return {
        showSearch: true,
        options: optionCustomer,
      };
    },
  });
});
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, validate }] = useForm({
  labelWidth: 100,
  schemas: formSchema,
  showActionButtonGroup: false,
  baseColProps: { lg: 6, md: 12 },
});
const [register, { openModal, closeModal }] = useModal();
const [registerInfo, { openModal: openInfoModal, closeModal: closeInfoModal }] = useModal();
if (route.params.id !== ':id') {
  projectGet({ id: route.params.id }).then((res) => {
    setFieldsValue({
      ...res,
      effectGraphFileUrl: [res.effectGraphFileUrl],
      planarGraphFileUrl: [res.planarGraphFileUrl],
      planStartTime: moment(res.planStartTime).format('x'),
      planEndTime: moment(res.planEndTime).format('x'),
      typeAll: { label: res.typeVal, value: res.type },
    });
  });
} else {
}
const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
const handleCreate = () => {
  openDrawer(true, {
    record: { projectName: getFieldsValue().name, projectId: getFieldsValue().id },
    isUpdate: false,
  });
  data.type = 'add';
};
//新增
const handleAddSuccess = async (formData) => {
  let params = { ...formData };
  try {
    await userProjectAdd(params);
    closeDrawer();
    reload();
  } catch (error) {}
};
//详情
const handleDetail = async (record) => {
  try {
    const info = await userProjectInfo({
      id: record.id,
      projectId: route.params.id,
    });
    data.userInfoList = info;
    console.log('我是数据', data.userInfoList);
    openInfoModal();
  } catch (error) {}
};
//提交
function handleSuccess(formData) {
  switch (data.type) {
    case 'add':
      handleAddSuccess(formData);
      break;
  }
}
//员工离职
const handleDepart = (record) => {
  data.tableItem = { ...record };
  console.log(data);
  openModal();
};
//编辑员工
const editUser = async () => {
  data.tableItem.status = 0;
  let params = { ...data.tableItem };
  params.leaveTime = moment(data.tableItem.leaveTime).format('X');
  await userProjectEdit(params);
  closeModal();
  message.success('操作成功！');
  reload();
};
const userInfo = () => {
  closeInfoModal();
};
//删除员工
const handleDelete = async (record) => {
  try {
    await userProjectDelete({ id: record.id });
    message.success('删除成功！');
    reload();
  } catch (error) {}
};
</script>
